import React, { Component } from 'react';
import { View, Text } from 'react-native';
import _ from 'lodash';

import style from './style';

export default ({ data, colors }) => {
  const children = _.map(data, ({ name, percentageRanking, count }, i) => (
    <View
      key={`chart_info_${i}`}
      style={[style.infoItem, i !== 0 ? style.leftBorder : null]}
    >
      <Text style={[style.infoItemName, { color: colors[i] }]}>{name}</Text>
      <Text style={[style.infoItemCount, { color: colors[i] }]}>{count}</Text>
      <Text style={style.infoItemRate}>超越{`${percentageRanking}%`}</Text>
    </View>
  ));
  return <View style={style.infoWrap}>{children}</View>;
};
